<template>
    <div>
        <chart-line :options="options" :zoom="false" title="时段报表" style="width: 100%; height: 500px;"></chart-line>
    </div>
</template>

<script>
import ChartLine from "~/components/ChartLine"

export default {
    components: {
        ChartLine,
    },
    data() {
        return {
            loading: false,
            options: {},
        }
    },
    computed: {
        maxHeight() {
            return this.$store.state.backend.windowInnerHeight - 220;
        },
    },
    watch: {

    },
    methods: {
        setOptions(data) {
            let series = [[], []];
            let xAxis = [];
            data.map(v => {
                series[0].push((v.sceneRunningWater/1e8).toFixed(2));
                series[1].push((v.sceneRunningWaterOld/1e8).toFixed(2));
                xAxis.push(v.hour);
            });

            this.options = {
                legend: {
                    data: ['今日流水', '昨日流水']
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b0}时<br>{a0}: {c0} 亿<br>{a1}: {c1} 亿',
                },
                yAxis: {
                    axisLabel: {
                        show: true,
                        interval: 'auto',
                        formatter: '{value} 亿'
                    },
                },
                xAxis: {
                    axisLabel: {
                        formatter: '{value} 时'
                    },
                    data: xAxis,
                    inverse: true,// 反转坐标轴
                },
                series: series,
                seriesFormatter (point) {
                    return point.data + "亿";
                },
            };
        },
    },
    created() {

    }
}
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}
</style>

